<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="content" :style="{'background':ktheme == 'black' ? 'black':'white'}" style="min-height: 100vh">
			<hx-navbar title="ios使用手册" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<view class="cont">

				<view class="">
					<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#ffffff':'#000000')}">
						1：使用浏览器打开
					</view>
					<view class="cont_img">
						<image class="cimg" src="@/static/ios/1.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#ffffff':'#000000')}">
					2：点击按钮下载
				</view>

				<view class="button_container" :class="ktheme =='black' ? 'button_black':'button_white'" @click="ios()">
					<!-- ios -->
					<view class="button_container_left">
						<image src="/static/download/IOS.png">
					</view>
					<view class="button_container_right">
						<view>IOS</view>
						<view>立即下载</view>
					</view>
				</view>
				<view class="" v-for='(item,index) in list'>
					<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#ffffff':'#000000')}">
						{{item.cont}}
					</view>
					<view class="cont_img">
						<image class="cimg" :src="item.image" mode="widthFix"></image>
					</view>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weChatShow: false,
				list: [{
						id: 2,
						cont: '3：允许配置文件',
						image: '../../static/ios/2.png'
					},
					{
						id: 3,
						cont: '4：下载完成到设置中配置',
						image: '../../static/ios/3.png'
					},
					{
						id: 4,
						cont: '5：打开设置选择已下载描述文件',
						image: '../../static/ios/4.png'
					},
					{
						id: 5,
						cont: '6：选择安装下载',
						image: '../../static/ios/5.PNG'
					},
					{
						id: 6,
						cont: '7：输入自己设置的开屏密码',
						image: '../../static/ios/6.PNG'
					},
					{
						id: 7,
						cont: '8：点击下一步进行后期步骤',
						image: '../../static/ios/7.PNG'
					},
					{
						id: 8,
						cont: '9：选择安装',
						image: '../../static/ios/8.PNG'
					},
					{
						id: 9,
						cont: '',
						image: '../../static/ios/9.PNG'
					},
					{
						id: 10,
						cont: '10：下载完成',
						image: '../../static/ios/10.PNG'
					},
					{
						id: 11,
						cont: '11：VPN与设备管理配置描述选择金世界',
						image: '../../static/ios/11.PNG'
					},


				]

			}
		},
		methods: {
			ios() {
				let url = 'https://shucang.zhongfujiayi.com//zwsl.mobileconfig';
				// #ifdef H5
					const ua = window.navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						this.weChatShow = true
					} else {
						this.weChatShow = false
						window.open(url)
					}
				// #endif
				// #ifdef APP-PLUS
					plus.runtime.openURL(url)
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.cont {
		width: 690rpx;
		margin: 10rpx auto;
	}

	.button_black {
		border: 2rpx #fff solid;
	}

	.button_white {
		border: 2rpx #6958D5 solid;
		background: #cca2fc;
	}

	.button_container_right {
		color: white;
	}

	.button_container {
		width: 70%;
		margin: 30rpx auto;
		justify-content: center;
		display: flex;
		// height: 45px;
		align-items: center;
		border-radius: 30px;
		font-size: 15px;
		// color: #ffffff;
		padding: 4px 50px;
		// background: #28caad;

		&_left {
			image {
				height: 40px;
				width: 40px;
				margin-right: 5px;
			}
		}

		.button_container_left_more {
			image {
				height: 30px;
				width: 30px;
				margin-right: 8px;
			}
		}
	}

	.cont_size {
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.cont_img {
		text-align: center;
		margin: 10rpx auto;
	}

	.cimg {
		width: 620rpx;
	}
</style>